<template>
 <div :class="mode" class="simple-message-box">
   <div class="text-message">
     {{message}}
   </div>
 </div>
</template>
<script setup>
import {computed} from "vue";

const props = defineProps({
  message: {
    type: String
  },
  mode:{
    type:String
  }
})
const mode = computed(()=> props.mode)
</script>

<style scoped>
.text-message{
  padding: 8px;
  border: 1px solid lightgray;
  border-radius: 4px;
}
.left{
  justify-content: left;
  margin-left: 8px;
}
.right{
  justify-content: right;
  margin-right: 8px;
}
.simple-message-box{
  display: flex;
}
</style>
